<template>
	<view class="page-main">
		<scroll-view scroll-y scroll-with-animation :scroll-top="chartScrollTop">
			<image class="headImg" src="/static/headbgi.png"></image>
			<view class="chat-list">
				<view :class="item.type === 'sys'?'chat-list-li-left':'chat-list-li-right'" v-for="(item,index) in chatList" :key="index">
					<image v-show="item.type === 'sys'" src="../../static/sysAvatar.jpeg" mode=""></image>
					<image v-show="item.type === 'user'" src="../../static/userAvatar.png" mode=""></image>
					<view class="chat-user" :class="item.type === 'sys'?'chat-sys':'chat-user'">
						<view v-html="item.msg"></view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="form-tabList">
			<view class="form-tab-item" :class="tabList.length>3?'form-tab-item-2':''" v-for="(item,index) in tabList" :key="index" @click="changeTab(item)">
				{{item.dictLabel}}
			</view>
		</view>

		<view class="showFixeBtn" v-show="showFixeBtn" @click="openPopupRef">
			<text class="iconfont iconzixun"></text>
		</view>
	</view>

	<view class="page-record">
		<text>吉ICP备2024021900号</text>
	</view>

	<uni-popup ref="popupRef" @change="changePopup">
		<view class="popupRef-main">
			<view class="popupRef-head">
				<text></text>
				<text class="iconfont iconclose" @click="closePopupRef"></text>
			</view>
			<view class="popupRef-content">
				<view class="lee-form-input">
					<input type="text" placeholder="姓名" v-model="formData.name" />
				</view>
				<!-- 输入框 -->
				<view class="lee-form-input">
					<input type="number" placeholder="手机号" v-model="formData.phone" />
				</view>
				<!-- 单选-单个 -->
				<view class="lee-form-radio" @click="setAgreeChecked">
					<radio style="transform:scale(0.7)" @click.stop="setAgreeChecked" :checked="formData.agreeChecked" color="#296bef" />
					<text class="lee-color-black">我已阅读并同意 <text class="lee-color-blue" @click.stop="openPopupAgreeRef">《个人信息与隐私保护条款》</text> </text>
				</view>
			</view>
			<view class="popupRef-footer">
				<button class="submitFormBtn" @click="submitForm">立即获取直评条件</button>
			</view>
		</view>
	</uni-popup>

	<uni-popup ref="popupAgreeRef">
		<view class="popupRef-main">
			<view class="popupRef-head">
				<text></text>
				<text class="iconfont iconclose" @click="closePopupAgreeRef"></text>
			</view>
			<view class="popupRef-htmlContent" v-html="privacyHtml">
			</view>
			<view class="popupRef-footer">
				<button class="submitFormBtn" @click="closePopupAgreeRef">我知道了</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
	import { onShow, onHide, onLoad, onReady, onReachBottom, onPullDownRefresh, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'

	// const BASE_URL = "http://10.0.2.159:8081/"
	// const BASE_URL = "http://101.37.119.65:8085/prod-api/"
	const BASE_URL = "http://ruishimes.com.cn/prod-api/"

	const { tabList, tabGradeList, tabTypeList, tabStuList, popupRef, showFixeBtn, changeTab, openPopupRef, closePopupRef, changePopup, result, resetUseTabListHook } = useTabList()
	const { popupAgreeRef, privacyHtml, openPopupAgreeRef, closePopupAgreeRef, setAgreeChecked } = popupAgreeRefModule()
	const formData = reactive({
		grade: "",
		type: "",
		stu: "",
		phone: "",
		name: "",
		agreeChecked: false
	})
	const chartScrollTop = ref(0)
	const chatList = ref([
		// 	{
		// 	type: "sys",
		// 	msg: "您好！欢迎进入2024工程师职称评审系统！填写以下资料看看是否满申报条件"
		// }, {
		// 	type: "sys",
		// 	msg: "您要评审的<text style='color:#c0392b'>级别</text>是："
		// }, {
		// 	type: "sys",
		// 	msg: "您要评审的<text style='color:#c0392b'>专业</text>是："
		// }, {
		// 	type: "sys",
		// 	msg: "您的<text style='color:#c0392b'>学历</text>是："
		// }, {
		// 	type: "user",
		// 	msg: "初级工程师"
		// }
	])

	// 监听多个数据
	watch([() => result.grade, () => result.type, () => result.stu], ([newgrade, newtype, newstu], [oldgrade, oldtype, oldstu]) => {
		setTimeout(() => {
			chartScrollTop.value = Math.random() * 10000
		}, 200)
		if (oldgrade && newgrade != oldgrade) {
			formData.grade = newgrade
			chatList.value.push({
				type: "user",
				msg: newgrade.dictLabel,
				dictLabel: newgrade.dictLabel,
				dictValue: newgrade.dictValue
			})
			chatList.value.push({
				type: "sys",
				msg: "您要评审的<text style='color:#c0392b'>专业</text>是："
			})
		}
		if (oldtype && newtype != oldtype) {
			formData.type = newtype
			chatList.value.push({
				type: "user",
				msg: newtype.dictLabel,
				dictLabel: newtype.dictLabel,
				dictValue: newtype.dictValue
			})
			chatList.value.push({
				type: "sys",
				msg: "您的<text style='color:#c0392b'>学历</text>是："
			})
		}
		if (oldstu && newstu != oldstu) {
			formData.stu = newstu
			chatList.value.push({
				type: "user",
				msg: newstu.dictLabel,
				dictLabel: newstu.dictLabel,
				dictValue: newstu.dictValue
			})
			chatList.value.push({
				type: "sys",
				msg: "意向采集完成，请点击 立即获取直评条件"
			})
		}
	}, {
		immediate: true,
		deep: true // 对于 ref，通常不需要深度侦听
	});



	onLoad(() => {
		setTimeout(() => {
			chatList.value.push({
				type: "sys",
				msg: "您好！欢迎进入2024工程师职称评审系统！填写以下资料看看是否满申报条件"
			})
			setTimeout(() => {
				chatList.value.push({
					type: "sys",
					msg: "您要评审的<text style='color:#c0392b'>级别</text>是："
				})
			}, 500)
		}, 500)
	})

	function submitForm() {

		/**
		 * 手机号规范校验
		 * @param {*} callback
		 */
		const isPhoneNum = value => {
			let result = {
				msg: "",
				status: true
			}
			if (!value) {
				result.msg = "手机号不能为空!"
				result.status = false
				return result
			} else if (!/^[0-9]*$/.test(value)) {
				result.msg = "手机号码必须为数字值!"
				result.status = false
				return result
			} else if (value.length < 11) {
				result.msg = "手机号码不得少于11位!"
				result.status = false
				return result
			} else if (value.length > 11) {
				result.msg = "手机号码不得超过11位!"
				result.status = false
				return result
			} else if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
				result.msg = "请输入正确的手机号码!"
				result.status = false
				return result
			} else {
				return result
			}
		};

		if (!formData.name) {
			return uni.showToast({
				title: "请填写姓名",
				icon: "none"
			})
		}
		if (!isPhoneNum(formData.phone).status) {
			return uni.showToast({
				title: isPhoneNum(formData.phone).msg,
				icon: "none"
			})
		}
		if (!formData.agreeChecked) {
			return uni.showToast({
				title: "请阅读并同意《个人信息与隐私保护条款》",
				icon: "none"
			})
		}
		let params = {
			reviewLevelName: formData.grade.dictLabel,
			reviewLevelCode: formData.grade.dictValue, // 评审
			majorName: formData.type.dictLabel,
			majorCode: formData.type.dictValue, // 专业
			educational: formData.stu.dictLabel,
			educationalCode: formData.stu.dictValue, // 学历

			name: formData.name, // 姓名
			phone: formData.phone, // 手机号码
		}
		uni.request({
			// url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
			url: BASE_URL + 'system/application/addQualification', //仅为示例，并非真实接口地址。
			data: params,
			method: "POST",
			header: {
				'Content-Type': 'application/json;charset=UTF-8',
			},
			success: (res) => {
				if (res.data.code !== 200) {
					return uni.showToast({
						title: res.data.msg,
						icon: "none",
						mask: true,
						duration: 5000
					})
				}
				uni.showToast({
					title: res.data.msg,
					icon: "none"
				})
				uni.redirectTo({
					url: "/pages/recordApply/index"
				})
				resetUseTabListHook()
			},
			fail: (err) => {
				uni.showToast({
					title: res.data.msg,
					icon: "none"
				})
			}
		});



		return
		uni.navigateTo({
			url: "/pages/phoneCode/index/index?params=" + JSON.stringify(formData)
		})
	}



	function popupAgreeRefModule() {
		const popupAgreeRef = ref(null)
		const privacyHtml = ref(`<h4>尊敬的用户：</h4>
		<p>1、本服务页面及本协议由长春市睿仕信息技术咨询有限公司（以下简称“我方”）提供。</p>
		<p>2、我方将按照本条款的规定收集、处理您的个人信息。本协议可能涉及您个人信息权益的重要约定，请您在提供个人信息前仔细阅读。一旦您在页面上提交了相关信息，即视为您同意本协议的全部内容。</p>
		<p>3、我方将对您的个人信息进行评审。如您提供了上述信息，您应保证所有信息真实、准确、完整、有效。</p>
		<p>4、您同意我方可基于对您的个人信息进行收集和/或处理</p>
		<p>5、我方将采取有效措施保障您的个人信息安全</p>
		<p>6、若您是未满18周岁的未成年人，请在您的父母或其他监护人监护、指导下共同阅读本协议。</p>
		<p style="text-align='center'">长春市睿仕信息技术咨询有限公司</p>`) // 个人信息与隐私保护条款

		function closePopupAgreeRef() {
			popupAgreeRef.value.close()
		}

		function openPopupAgreeRef() {
			popupAgreeRef.value.open()
		}

		function setAgreeChecked() {
			formData.agreeChecked = !formData.agreeChecked
		}
		return {
			popupAgreeRef,
			privacyHtml,
			openPopupAgreeRef,
			closePopupAgreeRef,
			setAgreeChecked
		}
	}

	function useTabList() {
		const tabList = ref([])
		const tabGradeList = ref([{
			name: "初级工程师",
			value: "1"
		}, {
			name: "中级工程师",
			value: "2"
		}, {
			name: "副高级工程师",
			value: "3"
		}])
		const tabTypeList = ref([{
			name: "建筑类",
			value: "a"
		}, {
			name: "机电类",
			value: "b"
		}, {
			name: "土木类",
			value: "c"
		}, {
			name: "其他类",
			value: "d"
		}])
		const tabStuList = ref([{
			name: "大专",
			value: "s1"
		}, {
			name: "本科",
			value: "s2"
		}, {
			name: "研究生及以上",
			value: "s3"
		}])
		const optionNum = ref(0)
		const result = reactive({
			grade: {},
			type: {},
			stu: {},
		})
		const popupRef = ref(null)
		const showFixeBtn = ref(false)

		onLoad(() => {
			getDicts("engineer_level")
			getDicts("title_category")
			getDicts("educational_background")
		})

		function resetUseTabListHook() {
			closePopupRef()
		}
		// 获取字典信息
		// engineer_level  title_category  educational_background
		function getDicts(dictType) {
			uni.request({
				// url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
				url: BASE_URL + 'system/dict/data/type/' + dictType, //仅为示例，并非真实接口地址。
				method: "GET",
				header: {
					'Content-Type': 'application/json;charset=UTF-8',
				},
				success: (res) => {
					switch (dictType) {
						case "engineer_level":
							tabGradeList.value = res.data.data;
							// console.warn("级别", tabGradeList)
							break;
						case "title_category":
							tabTypeList.value = res.data.data;
							// console.warn("类别", tabTypeList)
							break;
						case "educational_background":
							tabStuList.value = res.data.data;
							// console.warn("学历", tabStuList)
							break;
						default:
							break;
					}
					changeTab()
				}
			});
		}

		function changeTab(item) {
			if (optionNum.value <= 3 && optionNum.value >= 0 && item) {
				optionNum.value++
			}
			switch (optionNum.value) {
				case 1:
					result.grade = item
					tabList.value = tabTypeList.value
					break;
				case 2:
					result.type = item
					tabList.value = tabStuList.value
					break;
				case 3:
					result.stu = item
					openPopupRef()
					break;
				case 4:
					result.stu = item
					openPopupRef()
					showFixeBtn.value = true
					break;
				default:
					tabList.value = tabGradeList.value
					break;
			}
		}

		function closePopupRef() {
			popupRef.value.close()
		}

		function openPopupRef() {
			popupRef.value.open("bottom")
		}

		function changePopup(e) {
			showFixeBtn.value = !e.show
		}

		return {
			tabList,
			tabGradeList,
			tabTypeList,
			tabStuList,
			popupRef,
			showFixeBtn,
			changeTab,
			openPopupRef,
			closePopupRef,
			changePopup,
			result,
			resetUseTabListHook
		}
	}
</script>

<style scoped lang="scss">
	.lee-color-black {
		color: #555;
	}

	.lee-color-blue {
		color: #6281c0;
	}



	.page-main {
		min-height: 100vh;
		width: 100vw;
		background-color: #eee;

		scroll-view {
			height: calc(100vh - 100rpx);
			overflow-y: auto;
		}

		.showFixeBtn {
			height: 100rpx;
			width: 100rpx;
			border-radius: 100%;
			background-color: #296bef;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			right: 30rpx;
			bottom: 200rpx;

			.iconfont {
				font-size: 60rpx;
				position: relative;
				left: -1rpx;
			}
		}

		.headImg {
			width: 100vw;
			height: 50vh;
		}

		.chat-list {
			display: flex;
			flex-direction: column;
			padding: 20rpx 20rpx 20rpx 20rpx;
			color: #555;
			font-size: 30rpx;
			width: 100%;
			box-sizing: border-box;

			.chat-list-li-left {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				flex-wrap: nowrap;
				width: 100%;
				padding-bottom: 40rpx;

				.chat-sys {
					max-width: 65%;
					border-radius: 10rpx;
					position: relative;
					min-height: 80rpx;
					background-color: #fff;
					padding: 20rpx;
					box-sizing: border-box;
					text-align: left;

					&:before {
						position: absolute;
						top: 25rpx;
						left: -10rpx;
						content: "";
						border-top: 15rpx solid transparent;
						border-bottom: 15rpx solid transparent;
						border-right: 15rpx solid #fff;
						width: 0;
						height: 0;
					}
				}

				image {
					height: 70rpx;
					width: 70rpx;
					border-radius: 100%;
					margin: 5rpx 20rpx 0rpx 0;
				}
			}

			.chat-list-li-right {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				flex-wrap: nowrap;
				width: 100%;
				padding-right: 100rpx;
				position: relative;
				padding-bottom: 40rpx;
				box-sizing: border-box;

				.chat-user {
					max-width: 65%;
					border-radius: 10rpx;
					position: relative;
					min-height: 80rpx;
					background-color: #95ec69;
					padding: 20rpx;
					box-sizing: border-box;

					&::after {
						position: absolute;
						top: 25rpx;
						right: -10rpx;
						content: "";
						border-top: 5px solid transparent;
						border-bottom: 5px solid transparent;
						border-left: 5px solid #95ec69;
						width: 0;
						height: 0;
					}
				}

				image {
					height: 70rpx;
					width: 70rpx;
					border-radius: 100%;
					margin: 5rpx 0rpx 0rpx 20rpx;
					position: absolute;
					right: 0rpx;
				}
			}
		}

		.form-tabList {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			width: 100vw;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0rpx;
			background-color: #eee;
			// height: 260rpx;
			// height: 140rpx;

			.form-tab-item {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-color: #296bef;
				border-radius: 8rpx;
				margin: 15rpx;
				font-size: 26rpx;
				height: 72rpx;
				width: calc(33.33% - 30rpx);
				box-sizing: border-box;
				padding: 0 20rpx;
			}

			.form-tab-item-2 {
				width: calc(50% - 30rpx) !important;
			}
		}
	}

	.popupRef-main {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		min-height: 40vh;
		width: 100vw;
		border-radius: 25rpx 25rpx 0 0;
		box-sizing: border-box;
		background-color: #fff;

		.popupRef-head {
			height: 70rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.iconclose {
				color: #d8d8d8;
				font-size: 40rpx;
				position: relative;
				right: 20rpx;
				bottom: 10rpx;
			}
		}

		.popupRef-htmlContent {
			width: 100%;
			height: 30vh;
			overflow-y: auto;
		}

		.popupRef-content {
			width: 100%;
			display: flex;
			flex-direction: column;
			font-size: 30rpx;
		}

		.popupRef-footer {
			width: 100%;
			padding: 20rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;

			.submitFormBtn {
				background-color: rgb(41, 107, 239);
				color: rgb(255, 255, 255);
				height: 80rpx;
				width: 100%;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
			}
		}
	}

	.lee-form-radio {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	// 输入框
	.lee-form-input {
		width: 100%;
		height: 107rpx;
		background: #F6F8FC;
		border-radius: 54rpx;
		position: relative;
		color: #717171;
		margin-bottom: 20rpx;

		input {
			padding: 0 60rpx;
			font-size: 35rpx;
			width: 100%;
			height: 107rpx;
			line-height: 107rpx;
			text-align: left;
			box-sizing: border-box;
		}
	}


	/* 当屏幕宽度大于980px时，应用PC端的样式 */
	@media (min-width: 980px) {
		.page-main {
			width: 500px !important;
			margin: 0 auto;
			box-sizing: border-box;
			text-align: center;
		}

		.headImg {
			width: 500px !important;
			height: 50vh;
		}

		.form-tabList {
			width: 500px !important;
		}

		.popupRef-main {
			width: 500px !important;
			margin: 0 auto;
		}

		.showFixeBtn {
			right: calc(50% - 200px) !important;
		}
	}
</style>